<!-- home -->
<template>
  <div class="container">
    <van-nav-bar
      title="任务填报情况"
      class="navclass"
      left-arrow
      left-text="返回"
      @click-left="doback"
    />

    <div style="margin: 5px;">
      <van-cell title="选择月份" required v-model="ssyf" @click="onDisplay2" is-link />
    </div>
    <van-popup v-model="ssyfshow" round position="bottom" :style="{ height: '50%' }" >
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="onConfirmNy1"
        @cancel="oncancel1"
      />
    </van-popup>
    <van-tabs v-model="active" @click="onChangePhTab">
      <van-tab title="按部门">
        <div class="box">
          <div v-for="item in deptList " :key="item.index"  >
            <div class="yuangong">
              <div class="rownr" >
                <div style="width: 25%;text-align: center;padding-top: 5px;font-size: 16px;font-weight: bold;color: blue">{{item.deptname}}</div>
                <div style="width: 25%;text-align: center;padding-top: 10px;font-size: 14px;color: #20a0ff">已报：{{item.total}}元</div>
                <div style="width: 25%;text-align: center;padding-top: 10px;font-size: 14px;color: red">目标：{{item.taskNum}}元</div>
                <div style="width: 25%;text-align: center;padding-top: 10px;font-size: 14px;">{{item.fzrname}}</div>
              </div>
              <div class="rownr">
                <div style="width: 25%;text-align: center;padding-top: 5px;display:flex;flex-direction: column;font-size: 14px;">
                  <div style="padding-top: 5px;">第一周：</div>
                  <div style="padding-top: 5px;"><label style="color: #20a0ff">{{item.firstTotal}}</label> / <label style="color: red">{{item.firstTaskNum}}</label></div>
                </div>
                <div style="width: 25%;text-align: center;padding-top: 5px;display:flex;flex-direction: column;font-size: 14px;">
                  <div style="padding-top: 5px;">第二周：</div>
                  <div style="padding-top: 5px;"><label style="color: #20a0ff">{{item.secondTotal}}</label> / <label style="color: red">{{item.secondTaskNum}}</label></div>
                </div>
                <div style="width: 25%;text-align: center;padding-top: 5px;display:flex;flex-direction: column;font-size: 14px;">
                  <div style="padding-top: 5px;">第三周：</div>
                  <div style="padding-top: 5px;"><label style="color: #20a0ff">{{item.thirdTotal}}</label> / <label style="color: red">{{item.thirdTaskNum}}</label></div>
                </div>
                <div style="width: 25%;text-align: center;padding-top: 5px;display:flex;flex-direction: column;font-size: 14px;">
                  <div style="padding-top: 5px;">第四周：</div>
                  <div style="padding-top: 5px;"><label style="color: #20a0ff">{{item.fourthTotal}}</label> / <label style="color: red">{{item.fourthTaskNum}}</label></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="按人员">
        <van-tabs v-model="personactive" @click="onChangePsnlTab">
          <van-tab title="已报">
            <div v-for="item in tbList " :key="item.index">
              <div class="yuangong">
                <div class="rownr" >
                  <div style="width: 30%;text-align: center;padding-top: 5px;font-size: 16px;font-weight: bold;color: blue">{{item.index}}. {{item.name}}</div>
                  <div style="width: 40%;text-align: right;padding-top: 5px;font-size: 16px;color: red">目标：{{item.taskNum}}元</div>
                  <div style="width: 30%;text-align: right;padding-top: 5px;font-size: 16px;">{{item.deptname}}</div>
                </div>
                <div class="rownr">
                  <div style="width: 25%;text-align: center;padding-top: 5px;display:flex;flex-direction: column;font-size: 14px;">
                    <div style="padding-top: 5px;">第一周：</div>
                    <div style="padding-top: 5px;"><label style="color: #20a0ff">{{item.firstTaskNum}}</label></div>
                  </div>
                  <div style="width: 25%;text-align: center;padding-top: 5px;display:flex;flex-direction: column;font-size: 14px;">
                    <div style="padding-top: 5px;">第二周：</div>
                    <div style="padding-top: 5px;"><label style="color: #20a0ff">{{item.secondTaskNum}}</label></div>
                  </div>
                  <div style="width: 25%;text-align: center;padding-top: 5px;display:flex;flex-direction: column;font-size: 14px;">
                    <div style="padding-top: 5px;">第三周：</div>
                    <div style="padding-top: 5px;"><label style="color: #20a0ff">{{item.thirdTaskNum}}</label></div>
                  </div>
                  <div style="width: 25%;text-align: center;padding-top: 5px;display:flex;flex-direction: column;font-size: 14px;">
                    <div style="padding-top: 5px;">第四周：</div>
                    <div style="padding-top: 5px;"><label style="color: #20a0ff">{{item.fourthTaskNum}}</label></div>
                  </div>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab title="未报">
            <div class="box">
                <div class="rownr">
                  <div style="width: 30%;text-align: center;padding-top: 5px;font-size: 16px;">排序</div>
                  <div class="shuxian"></div>
                  <div style="width: 30%;text-align: center;padding-top: 5px;font-size: 16px;">姓名</div>
                  <div class="shuxian"></div>
                  <div style="width: 30%;text-align: center;padding-top: 5px;font-size: 16px;">所属部门</div>
                </div>

                <div v-for="item in tbList " :key="item.index">
                  <div class="rownr">
                    <div style="width: 30%;text-align: center;padding-top: 5px;font-size: 16px;">{{item.index}}</div>
                    <div style="width: 30%;text-align: center;padding-top: 5px;font-size: 16px;">{{item.name}}</div>
                    <div style="width: 30%;text-align: center;padding-top: 5px;font-size: 16px;">{{item.deptname}}</div>
                  </div>
                </div>
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>

import { Dialog, Toast, Grid, GridItem, Calendar, Cell } from 'vant'
import { floatAdd, floatSub, floatMul, floatDiv } from '../../utils/NumberUtil'
import { queryUserInfo, queryDeptAchDetail, queryDeptTaskDetail, queryPsnlTaskDetail } from '../../api/api'

export default {
  name: 'RwqkDetail',
  data() {
    return {
      date: '',
      show: false,
      dateshow: false,
      minDate: new Date(2020, 1, 1),
      maxDate: new Date(2029, 12, 31),
      zje: '',
      deptid: '',
      deptname: '',
      currentDate: new Date(),
      postList: [],
      rqshow: true,
      kjflag: false,
      ssyfshow: false,
      ssyf: '',
      weekflag: '',
      weekList: [],
      xseList: [],
      sortflag: '1',
      deptList: [],
      tbList: [],
      tbflag: '1',
      active: 0,
      personactive: 0
    }
  },

  created() {
    var dateNow = new Date()
    var year = dateNow.getFullYear() + ''
    var month = (dateNow.getMonth() + 1) + ''
    var day = dateNow.getDate() + ''
    var ssyf = year + (month < 10 ? '0' : '') + month
    this.ssyf = ssyf
    this.ywyname = this.$store.getters.userName
    this.queryUserInfo()
  },
  mounted() {

  },

  methods: {

    addyj() {
      this.$router.push({ path: '/addyj', query: {}})
    },

    onDisplay2() {
      this.ssyfshow = true
    },

    onClose() {
      this.show = false
    },

    onConfirm(event) {
      this.dateshow = false
      this.date = this.formatDate(event)
      this.queryYwyAchievements()
    },

    formatDate(date) {
      const date1 = new Date(date)
      return `${date1.getFullYear()}/${date1.getMonth() + 1}/${date1.getDate()}`
    },

    // 查询当前用户所在部门
    queryUserInfo() {
      const param = {}
      const userid = this.$store.getters.userId
      param.userid = userid
      queryUserInfo(param).then(response => {
        if (response.code === 200) {
          console.log(response)
          this.deptname = response.data.deptname
          this.deptid = response.data.deptid
          this.postList = response.data.postList
          this.queryDeptTaskDetail()
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    doback() {
      this.$router.go(-1) // 返回上一层
    },

    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },

    oncancel() {
      this.dateshow = false
    },

    oncancel1() {
      this.ssyfshow = false
    },

    onConfirmNy1(event) {
      var year = event.getFullYear() + ''
      var month = (event.getMonth() + 1) + ''
      var date = year + (month < 10 ? '0' : '') + month
      this.ssyf = date
      this.ssyfshow = false
      this.queryDeptTaskDetail()
    },

    onChangePhTab(event) {
      if (event == 0) {
        this.active = 0
        this.queryDeptTaskDetail()
      }
      if (event == 1) {
        this.active = 1
        this.queryPsnlTaskDetail()
      }
    },

    onChangePsnlTab(event) {
      if (event == 0) {
        this.personactive = 0
        this.tbflag = '1'
        this.queryPsnlTaskDetail()
      }
      if (event == 1) {
        this.personactive = 1
        this.tbflag = '2'
        this.queryPsnlTaskDetail()
      }
    },

    queryDeptTaskDetail() {
      const param = {}
      param.ssyf = this.ssyf
      const postList = this.postList
      if (postList) {
        for (var i = 0; i < postList.length; i++) {
          if (postList[i].postId == 4) {
            param.deptid = this.deptid
          }
        }
      }
      queryDeptTaskDetail(param).then(response => {
        if (response.code === 200) {
          console.log('部门详情')
          console.log(response)
          const deptList = response.rows
          if (deptList) {
            for (var i = 0; i < deptList.length; i++) {
              deptList[i].index = i + 1
            }
          }
          this.deptList = deptList
        } else {
          Toast.fail(response.msg)
        }
      })
    },

    queryPsnlTaskDetail() {
      const param = {}
      param.ssyf = this.ssyf
      param.tbflag = this.tbflag
      const postList = this.postList
      if (postList) {
        for (var i = 0; i < postList.length; i++) {
          if (postList[i].postId == 4) {
            param.deptid = this.deptid
          }
        }
      }
      queryPsnlTaskDetail(param).then(response => {
        if (response.code === 200) {
          console.log('人员情况详情')
          console.log(response)
          const tbList = response.rows
          if (tbList) {
            for (var i = 0; i < tbList.length; i++) {
              tbList[i].index = i + 1
            }
          }
          this.tbList = tbList
        } else {
          Toast.fail(response.msg)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: calc(100vh);
    background-color: #F0F4FE;
  }

  .navclass{
    background-color:#ffffff;
  }

  .box{
    background-color: #ffffff;
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .shuxian{
    width: 1px;
    height: 15px;
    line-height:10px;
    text-align: center;
    background: #B2B2B2;
    position: relative;
    margin-left: 10px;
    margin-top: 5px;
    border-radius: 5px;
  }

  .mubiao{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    right: 20px;
    position: fixed;
  }

  .columnr{
    display: flex;
    flex-direction: column;
    align-content: center;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 10px;
  }

  .rownr{
    display: flex;
    flex-direction: row;
    align-content: flex-start;
  }

  .quyu{
    margin-top: 20px;
    margin-left: 10px;
    font-size: 20px;
    font-weight: bold;
  }

  .fenge{
    width: 1px;
    height: 40px;
    line-height:20px;
    text-align: center;
    background: #B2B2B2;
    position: relative;
    margin-top: 10px;
    border-radius: 5px;
  }

  .yuangong{
    padding-bottom: 10px;
    margin:5px;
    width: 95%;
    height: auto;
    background-color: #F8FBFD;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
  }
</style>
